<template>
  <el-tree-select
    v-model="value"
    clearable
    :data="treeData"
    :placeholder="props.placeholder"
    :props="defaultProps"
    :render-after-expand="false"
    @node-click="handleNodeClick"
  />
</template>

<script setup>
  import { postRequest } from '@/api/mains'

  const props = defineProps({
    datas: {
      type: Object,
      default: () => {
        return {}
      },
    },
    url: {
      type: String,
      default: () => {
        return ''
      },
    },
    placeholder: {
      type: String,
      default: () => {
        return '请选择'
      },
    },
  })

  const defaultProps = {
    children: 'children',
    label: 'label',
    value: 'id',
  }

  const emit = defineEmits(['on-select-tree-one'])

  const value = ref()
  const treeData = ref([])

  const handleNodeClick = (node) => {
    emit('on-select-tree-one', node)
  }

  defineExpose({})

  onMounted(async () => {
    if (props.url != '') {
      const { datas } = await postRequest(props.url)
      treeData.value = datas
    }
  })
</script>
